<template>
  <view class="mine-container" :style="{ height: `${windowHeight}px`, }">
    <image src="../../static/images/mine/mine-bg.png" mode="scaleToFill" style="
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
      "></image>
    <view class="logo-section">
      <view class="flex  align-center">
        <view v-if="!avatar" class="cu-avatar xl round bg-white">
          <view class="iconfont icon-people text-gray icon"></view>
        </view>
        <image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round  image" mode="widthFix">
        </image>
        <!-- <view v-if="!name" @click="handleToLogin" class="login-tip">
          点击登录
        </view> -->
        <view @click="handleToInfo" class="user-info">
          <view class="u_title">
            {{ name || '未登录酷' }}
          </view>
          <view class="u_title-id">ID:10005060</view>
        </view>
      </view>
    </view>


    <div class="swiper-container">

      <div :style="{ width: `${windowWidth * animalList.length}px`, display: ' flex' }">
        <view class="animal-card" :style="{ width: `${windowWidth}px`, }" v-for="(item, index) in animalList"
          :key="index">
          <image src="../../static/images/mine/animal-card.png" style="
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 320px;
          z-index: -1;
        "></image>
          <view class="animal-title">宠物档案</view>
          <div>
            <view class="animal-info">
              <view class="animal-image">
                <image style="  width: 148px;
      height: 157px;" :src="item.photoUrls" mode=""></image>
              </view>
              <view class="animal-list">
                <view class="animal-items">
                  <view class="animal-items-label">姓名：</view>
                  <view class="animal-items-value">奈奈</view>
                </view>
                <view class="animal-items">
                  <view class="animal-items-label">类型：</view>
                  <view class="animal-items-value">{{ item.species }}</view>
                </view>
                <view class="animal-items">
                  <view class="animal-items-label">品种：</view>
                  <view class="animal-items-value">{{ item.breed }}</view>
                </view>
                <view class="animal-items">
                  <view class="animal-items-label">性别：</view>
                  <view class="animal-items-value">{{ item.gender }}</view>
                </view>
                <view class="animal-items">
                  <view class="animal-items-label">年龄：</view>
                  <view class="animal-items-value">{{ item.age }}</view>
                </view>
              </view>
            </view>
          </div>
        </view>
      </div>
    </div>
    <view class="animal-tip">
      <image style="width: 28px;height: 28px;" src="../../static/images/mine/image.png" alt=""></image>
      <view class="animal-text">我的功能</view>
    </view>
    <view class="use-wrap">
      <view class="user-container">
        <view class="use-left">
          <div class="top box_shadow">
            <div class="icon">
              <image style="width:40px ;height: 40px;" src="../../static/images/mine/problem-icon.png" alt="" srcset="">
              </image>
            </div>
            <div class="text-box">
              <div class="text-tit">智能宠物问答</div>
              <div class="text-center" style="text-align: left;">护理意见/营养推荐/疾病咨询建议</div>
            </div>
          </div>
          <div class="bottom box_shadow">
            <div class="item">
              <div class="icon">
                <image style="width: 30px;height: 30px;" src="../../static/images/mine/jdjl.png" alt="" srcset="">
                </image>
              </div>
              <div class="text-tit">鉴定记录</div>
            </div>
            <div class="item">
              <div class="icon">
                <image style="width: 30px;height: 30px;" src="../../static/images/mine/jyjl.png" alt="" srcset="">
                </image>
              </div>
              <div class="text-tit">交易记录</div>
            </div>
            <div class="item">
              <div class="icon">
                <image style="width: 30px;height: 30px;" src="../../static/images/mine/yjfk.png" alt="" srcset="">
                </image>
              </div>
              <div class="text-tit">意见反馈</div>
            </div>
            <div class="item">
              <div class="icon">
                <image style="width: 30px;height: 30px;" src="../../static/images/mine/kfrk.png" alt="" srcset="">
                </image>
              </div>
              <div class="text-tit">客服入口</div>
            </div>
          </div>
        </view>
        <view class="use-right box_shadow">

          <div class="item-tit text-tit">
            <image style="width: 20px;height: 20px;" src="../../static/images/mine/cwzs.png" alt="" srcset="">
            </image>
            宠物证书
          </div>
          <image style="width: 100px;height:133px;
    margin: 14px 0 8px 0;" src="../../static/images/mine/zstp.png" alt="" srcset=""></image>
          <div class="more">查看更多</div>

        </view>
      </view>
    </view>
    <view class="animal-tip">
      <image style="width: 28px;height: 28px;" src="../../static/images/mine/image.png" alt=""></image>
      <view class="animal-text">发布內容</view>
    </view>
    <div class="animal-list_card">
      <div class="animal-item" v-for="(item, index) in animalList" :key="index">

        <div class="animal-list-img ">
          <image class="animal-list-img" src="../../static/images/mine/image.png" alt=""></image>
        </div>

        <view class="animal-tit">dfgsgsg</view>
        <view class="animal-text">

          <div>
            {{ item.text }}dsgg
          </div>
          <image style="width: 28px;height: 28px;" src="../../static/images/mine/jt.png" alt=""></image>
        </view>

      </div>
    </div>

  </view>
</template>

<script>
import { species, getPetInfoPage } from "@/api/system/user"
export default {
  data() {
    return {
      name: this.$store.state.user.name,
      version: getApp().globalData.config.appInfo.version,
      info: '',
      animalList: [
        1, 1, 1, 1
      ],
    }
  },
  computed: {
    avatar() {
      return this.$store.state.user.avatar
    },
    windowHeight() {
      return uni.getSystemInfoSync().windowHeight - 50
    },
    windowWidth() {
      return uni.getSystemInfoSync().windowWidth
    }
  },
  onLoad() {
    this.getUser()
    this.getList()
  },
  methods: {
    getList() {
      getPetInfoPage().then(response => {
        if (response.data.list) {
          this.animalList = response.data.list.concat(response.data.list)
        }

      })
    },

    getUser() {
      species().then(response => {

      })


    },
    handleToInfo() {
      this.$tab.navigateTo('/pages/notice/index')
    },

    handleLogout() {
      this.$modal.confirm('确定注销并退出系统吗？').then(() => {
        this.$store.dispatch('LogOut').then(() => {
          // 清除所有相关存储
          uni.removeStorageSync('token');
          uni.removeStorageSync('userInfo');
          this.$tab.reLaunch('/pages/index')
        })
      })
    },


  }
}
</script>

<style lang="scss">
page {
  background-color: rgb(255, 252, 243);
  // RGB 255 252 243
}

.logo-section {
  margin-top: 102px;
  padding: 0 0 12px 20px;

  .u_title {
    color: #000;
    text-align: center;
    font-family: xiaowei;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .u_title-id {
    color: #000;

    text-align: center;
    font-family: "PingFang SC";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
  }

  .user-info {
    padding-left: 18px;
  }

  .image {
    width: 80px;
    height: 80px;

  }
}

.swiper-container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
}

.animal-card {
  position: relative;
  height: 630rpx;
  padding: 106rpx 0 0 0;

  .animal-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Regular;
    font-weight: 400;
    font-size: 40rpx;
    leading-trim: NONE;
    line-height: 100%;
    text-align: center;
    vertical-align: middle;
    color: #000;
    text-align: center;
    font-family: xiaowei;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .animal-info {
    display: flex;
    align-items: center;
    margin: 21px 0px 0 47px;

    .animal-image {
      width: 148px;
      height: 157px;
      border-radius: 10px;
      background-color: rgb(214, 215, 221);
      border-radius: 10px;
      box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);

    }

    .animal-list {
      margin-left: 33px;

      .animal-items {
        font-size: 20px;
        display: flex;
        align-items: center;
        margin-bottom: 13rpx;

        .animal-items-label {
          color: #0073C6;
          text-align: center;
          font-family: xiaowei;
          font-size: 20px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
        }

        .animal-items-value {
          color: #000;
          text-align: center;
          font-family: xiaowei;
          font-size: 20px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;

        }
      }
    }
  }
}

.animal-tip {
  margin: 37px 0 13px 20px;
  height: 21px;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  .animal-text {
    color: #0073C6;
    text-align: center;
    font-family: xiaowei;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
}

.box_shadow {
  background-color: #fff;
  border-radius: 30rpx;
  box-shadow: 0 0 0 1px #f1f5f9, 0 2px 4px rgba(0, 0, 0, 0.05), 0 12px 24px rgba(0, 0, 0, 0.05);

box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.use-wrap {
  padding: 0 15px;

  .user-container {
    display: flex;
    justify-content: space-between;

    .use-left {
      width: 192px;

      .top {
        width: 192px;
        height: 68px;
        display: flex;
        padding: 14px;

        align-items: center;
        text-align: left;

        .icon {
          height: 40px;
          width: 40px;
        }

        .text-center {
          color: #0073C6;
          font-family: xiaowei;
          font-size: 10px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
        }
      }

      .bottom {
        display: flex;
        flex-wrap: wrap;
        margin-top: 6px;

        .item {
          width: 50%;
          padding: 10px;
          text-align: center;
        }
      }

      .text-box {
        margin-left: 10px;
      }

    }

  }
}

.use-right {
  padding: 14px 16px;
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .item-tit {
    display: flex;
    align-items: center;
    width: 100%;

  }

  .more {
    color: #0073C6;
    text-align: center;
    font-family: xiaowei;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
  }

}

.text-tit {
  color: #0073C6;

  font-family: xiaowei;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.animal-list_card {
  padding: 0px 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

  .animal-item {
    border-radius: 20px;
    padding: 4px;
    background: #FFF;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    margin-bottom: 15px;

    .animal-list-img {
      width: 150px;
      height: 130px;
      border-radius: 20px;
      background: #AEE4FF;
      margin-bottom: 10px;
    }

    .animal-tit {
      color: #000;
      font-family: xiaowei;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
    }

    .animal-text {
      color: #5CB5E1;
      font-family: xiaowei;
      font-size: 10px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 6px;
    }

  }
}


.mine-container {
  width: 100%;
  height: 100%;

  .header-section {
    padding: 5px;
    background-color: #007AFF;
    color: white;

    .login-tip {
      font-size: 18px;
      margin-left: 10px;
    }

    .cu-avatar {
      border: 2px solid #eaeaea;

      .icon {
        font-size: 40px;
      }
    }

    .user-info {
      margin-left: 18px;

      .u_title {
        font-size: 18px;
        line-height: 30px;
      }
    }
  }

  .content-section {
    position: relative;
    // top: -50px;

    .mine-head {
      margin-top: 10px;
      padding: 0 20px;
      width: 100%;
      height: 50px;
      line-height: 50px;
      background-color: #fff;

      h5 {
        font-size: 16px;
        float: left;
      }

      text {
        font-size: 14px;
        color: #888888;
        float: right;
      }
    }

    .mine-actions {
      // margin: 15px 15px;
      padding: 10px 20px;
      // border-radius: 8px;
      background-color: white;

      .action-item {
        .icon {
          font-size: 28px;
        }

        .text {
          display: block;
          font-size: 13px;
          margin: 8px 0px;
        }
      }
    }
  }
}
</style>
